<template>
  <div>
<!--    <GameReturn @selectGame="selectGame"></GameReturn>-->
    <component
        :user="user"
        :ws="ws"
        :is="currentComponent.componentName"
        :game="game"
        @selectGame="selectGame"
        @startGame="startGame"
        @gameOver="gameOver"
    >
    </component>
  </div>
</template>

<script>
import GameReturn from "@/components/home/components/GameReturn";
import GameSelector from "@/components/home/components/GameSelector";
import LandlordView from "@/components/game/landlord/LandlordView";
import LandlordGameView from "@/components/game/landlord/gameView/LandlordGameView";
import Cookies from "js-cookie";
export default {
  name: "HomeBody",
  components:{
    GameReturn,
    GameSelector,
    LandlordView,
    LandlordGameView
  },
  props:{
    user:{
      required: true
    }
  },
  data(){
    return{
      openMask: false,
      views: [
        {
          componentName: 'GameSelector',
          startGame:function (){},
          gameOver:function (){}
        },
        {
          componentName: 'LandlordView',
          startGame:function (){},
          gameOver:function (){}
        },
      ],
      gameViews:[
        {
          componentName: 'LandlordGameView'
        }
      ],
      currentComponent: null,
      ws: null,
      handle: null,
      game:null,
    }
  },
  methods:{
    selectGame(id, isStart){
      this.currentComponent = this.views[id];
      if(this.currentComponent.startGame&&isStart){
        this.currentComponent.startGame();
      }
    },
    gameOver(){
      this.views[1].gameOver();
    },
    isGame(){
      const require ={
        order: 6
      }
      this.ws.send(JSON.stringify(require));
      // console.log("查找是否处于对局中");
    },
    connectWS(){
      const ws = new WebSocket('ws://43.139.65.20:10000')
      let selectGame=(id, is)=>this.selectGame(id, is);
      let isGame=()=>this.isGame();
      ws.onmessage=function (o){
        let res = JSON.parse(o.data);
        switch (res.order){
          case 6:
            if(res.result){
              //跳转到对应游戏界面
              selectGame(res.game, true);
            }
            break;
          case 10:
            // console.log("用户认证成功")
            isGame();
            break;
        }
      }
      let recorderUser = ()=>this.recorderUser();
      ws.onopen=function (){
        // console.log("成功连接");
        recorderUser();
      }
      let showMask = ()=>this.showMask();
      ws.onclose=function (){
        console.log("连接错误");
        showMask();
      }
      return ws;
    },
    showMask(){
      Cookies.remove('user')
      this.$router.push('/login')
    },
    recorderUser(){
      const require ={
        order: 0,
        name: this.user.uname,
        id: this.user.uname,
        picture: this.user.picture
      }
      this.ws.send(JSON.stringify(require));
    },
    startGame(game){
        this.game=game;
        this.views[1].startGame();
    },
    startLandlordGame(){
      this.currentComponent=this.gameViews[0];
    },
    endLandlordGame(){
      this.selectGame(1,false);
    }
  },
  beforeMount() {
    this.currentComponent= this.views[0]
    this.views[1].startGame=()=>this.startLandlordGame();
    this.views[1].gameOver=()=>this.endLandlordGame();
    this.ws = this.connectWS();
  },
}
</script>

<style scoped>

</style>
